<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TiM</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .icon {
            width: 100%;
            height: 525px;
            overflow: hidden;
            margin: 0px auto;
            position: relative;
            background: url(img/index-bg1.png)0 0 / 100% 100%;
        }

        .icon-top {
            width: 100%;
            height: 46px;
        }

        .icon-top1 {
            width: 914px;
            height: 46px;
            margin: 0px auto;
            overflow: hidden;
        }

        .logo {
            width: 72px;
            height: 32px;
            margin-top: 12px;
            float: left;
            background: url(img/logo_white.png)0 0 / 100% 100%;
        }

        .wenzi {
            width: 350px;
            height: 47px;
            margin-right: 260px;
            float: right;
        }

        .wenzi li {
            font-size: 16px;
            line-height: 42px;
            padding: 0px 10px;
            margin: 0px 30px;
            color: #fff;
            float: left;
            text-align: center;
            cursor: pointer;
        }

        .wq {
            width: 40px;
            height: 43px;
            border-bottom: 2px solid #fff;
        }

        .wenzi li:hover {
            background: red;
        }

        .icon-bottom {
            width: 500px;
            height: 232px;
            position: absolute;
            right: 54%;
            top: 27%;
        }

        .move-logo {
            width: 170px;
            height: 50px;
            margin: 0px auto;
            background: url(img/banenr-logo.png)0 0 / 100% 100%;
            transform: translateY(50px);
            opacity: 0;
            animation: and 1s cubic-bezier(.8, 0, .2, 1) forwards;
        }

        @keyframes and {
            50% {
                transform: translateY(0)
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .move-title {
            font-size: 38px;
            text-align: center;
            line-height: 70px;
            padding-top: 0px;
            color: #fff;
            transform: translateY(50px);
            opacity: 0;
            animation: and 1s 80ms cubic-bezier(.8, 0, .2, 1) forwards;
        }

        .move-desc {
            font-size: 14px;
            color: #fff;
            transform: translateY(50px);
            opacity: 0;
            animation: and 1s 80ms cubic-bezier(.8, 0, .2, 1) forwards;
            text-align: center;
        }

        .move-down {
            width: 500px;
            margin-top: 30px;
            height: 82px;
            display: inline-block;
            transform: translateY(50px);
            opacity: 0;
            animation: ane 1s 240ms cubic-bezier(.8, 0, .2, 1) forwards;
        }

        @keyframes ane {
            50% {
                transform: rotateY(0)
            }
            100% {
                transform: rotateY(0);
                opacity: 1;
            }
        }

        .move-down li {
            width: 232px;
            height: 51px;
            background: #fff;
            font-size: 30px;
            border-radius: 25px;
            overflow: hidden;
            line-height: 51px;
            cursor: pointer;
            text-align: center;
            margin: 0px auto;
            transition: all 0.2s;

        }

        .move-down li span {
            width: 232px;
            height: 51px;
            display: block;
            color: #426cbc;
            transition: transform 0.2s;
        }

        .move-down li:hover .aa {
            background: cyan;
            transform: translateY(-50px);
        }

        .move-down li:hover .bb {
            background: cyan;
            transform: translateY(-50px);
        }

        .video-mod {
            width: 94.8516px;
            height: 168.098px;
            background: url(img/compm.png) 0 0 / 100% 100%;
            position: absolute;
            right: 570px;
            top: 290px;
            opacity: 0;
            transform: translateX(50px);
            animation: cad 2s linear forwards;
        }

        @keyframes cad {
            50% {
                transform: rotateX(0)
            }
            100% {
                transform: rotateX(0);
                opacity: 1;
            }
        }

        .function {
            width: 100%;
            height: 238px;
            overflow: hidden;

        }

        .func-inne {
            width: 942px;
            height: 188px;
            margin: 50px auto;
        }

        .func-item {
            width: 314px;
            height: 188px;
            float: left;
        }

        .func-logo1 {
            width: 114px;
            height: 100px;
            margin: 0px auto;
            background: url(img/function.png) 0 0 / 100% 100%
        }

        .func-title {
            width: 314px;
            height: 48px;
            font-size: 20px;
            text-align: center;
        }

        .func-desc {
            width: 226px;
            height: 40px;
            font-size: 14px;
            line-height: 20px;
            padding: 0 44px;
            text-align: left;
        }

        .doc {
            width: 100%;
            height: 590px;
            padding-top: 30px;
        }

        .doc-inner {
            width: 100%;
            height: 142px;
        }

        .second-title {
            width: 100%;
            height: 84px;
            padding-top: 39px;
            text-align: center;
            font-size: 30px;
            line-height: 60px;
            font-weight: 500;
        }

        .second-desc {
            width: 100%;
            height: 38px;
            text-align: center;
            margin-top: -20px;
            line-height: 38px;
            font-size: 18px;
        }

        .doc-bg {
            width: 100%;
            position: relative;
            height: 400px;
        }

        .moveUp {
            width: 735px;
            height: 500px;
            float: left;
            position: absolute;
            margin: 0px auto;
            left: calc(50% - 367px);
            bottom: -106px;
            background: url(img/yun.png) 0 0 / 100% 100%;
            opacity: 1;
            transform: translateY(50px);
            animation: cad 2s linear forwards;
        }

        @keyframes cad {
            50% {
                transform: rotateY(0)
            }
            100% {
                transform: rotateY(0);
                opacity: 1;
            }
        }

        .more {
            width: 100%;
            height: 440px;

            padding: 80px 0 24px 0;
        }

        .more-inner {
            width: 1092px;
            height: 440px;
            margin: 0px auto;
        }

        .more-item {
            width: 272px;
            height: 220px;
            float: left;
        }

        .item-logo2 {
            width: 40px;
            height: 40px;
            margin: 0px auto;
            background: url(img/email2x.png) 0 0 / 100% 100%;
        }

        .item-title {
            line-height: 60px;
            text-align: center;
            width: 272px;
            height: 48px;
            font-size: 20px;
        }

        .item-desc {
            width: 200px;
            height: 40px;
            margin: 0px auto;
            line-height: 20px;
            font-size: 14px;
        }

        .link {
            width: 100%;
            height: 151px;
            padding: 126px 0 120px 0;
            border-top: 1px solid #ccc;
        }

        .link h2 {
            padding-bottom: 50px;
            font-size: 40px;
            font-weight: 500;
            text-align: center;
        }

        .link-inner {
            width: 1092px;
            height: 49px;
            margin: 0 auto;
        }

        .link-inner li {
            padding: 0 36px 30px;
            float: left;
            cursor: pointer;
        }
        .footer{
            width: 100%;
            height: 80px;
            padding-top: 34px;
            color: #777777;
            font-size: 14px;
            background-color: #ebebeb;
            text-align: center;
            border-top: 1px solid #dbdbdb;
        }
        .footer p{
            padding: 0px 60px;
        }
        .useradjest{
            padding-right: 15px;
        }
        .copy-right{
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <div class="icon">
        <div class="icon-top">
            <div class="icon-top1">
                <div class="logo"></div>
                <div class="wenzi">
                    <li class="wq">首页</li>
                    <li>下载</li>
                    <li>支持</li>
                </div>
            </div>
        </div>
        <div class="icon-bottom">
            <div class="move-logo"></div>
            <div class="move-title">专注团队沟通协作</div>
            <div class="move-desc">支持云文件、在线文档、邮件收发、日程等办公功能。</div>
            <div class="move-down">
                <li>
                    <span class="aa">立即下载</span>
                    <span class="bb">立即下载</span>
                </li>
            </div>
        </div>
        <div class="video-mod"></div>

    </div>
    <div class="function">
        <div class="func-inne">
            <div class="func-item">
                <div class="func-logo1"></div>
                <div class="func-title">熟悉的QQ习惯</div>
                <div class="func-desc">使用QQ帐号登录，QQ好友和消息无缝同步。</div>
            </div>
            <div class="func-item">
                <div class="func-logo1"></div>
                <div class="func-title">熟悉的QQ习惯</div>
                <div class="func-desc">使用QQ帐号登录，QQ好友和消息无缝同步。</div>
            </div>
            <div class="func-item">
                <div class="func-logo1"></div>
                <div class="func-title">熟悉的QQ习惯</div>
                <div class="func-desc">使用QQ帐号登录，QQ好友和消息无缝同步。</div>
            </div>
        </div>
    </div>
    <div class="doc">
        <div class="doc-inner">
            <div class="second-title">10G免费云文件</div>
            <div class="second-desc">上传文件云端存储，收发文件长期有效。</div>
        </div>
        <div class="doc-bg">
            <div class="moveUp"></div>
        </div>
    </div>
    <div class="doc" style="margin-top:60px;">
        <div class="doc-inner">
            <div class="second-title">10G免费云文件</div>
            <div class="second-desc">上传文件云端存储，收发文件长期有效。</div>
        </div>
        <div class="doc-bg">
            <div class="moveUp"></div>
        </div>
    </div>
    <div class="doc" style="margin-top:60px;">
        <div class="doc-inner">
            <div class="second-title">10G免费云文件</div>
            <div class="second-desc">上传文件云端存储，收发文件长期有效。</div>
        </div>
        <div class="doc-bg">
            <div class="moveUp"></div>
        </div>
    </div>
    <div class="doc" style="margin-top:60px;">
        <div class="doc-inner">
            <div class="second-title">10G免费云文件</div>
            <div class="second-desc">上传文件云端存储，收发文件长期有效。</div>
        </div>
        <div class="doc-bg">
            <div class="moveUp"></div>
        </div>
    </div>
    <div class="more">
        <div class="more-inner">
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
            <div class="more-item">
                <div class="item-logo2"></div>
                <div class="item-title">邮件</div>
                <div class="item-desc">可代收和编辑各类邮箱邮件，邮件附件能够转存到云文件。</div>
            </div>
        </div>
    </div>
    <div class="link">
        <h2>合作链接</h2>
        <ul class="link-inner">
            <li>电脑管家</li>
            <li>QQ会员</li>
            <li>腾讯科技</li>
            <li>企鹅FM</li>
            <li>腾讯课堂</li>
            <li>腾讯证券</li>
            <li>腾讯教育</li>
            <li>腾讯财经</li>
        </ul>
    </div>
    <div class="footer">
        <p>
            <span class="useradjest">用户协议
                </a>     
            </span>
            <span style="border-left:1px solid #ccc;padding-left:15px">TIM意见反馈：</span>
            274281820（QQ群）
            <span style="border-left:1px solid #ccc;padding-left:15px">TIM在线文档反馈：</span>
            303702904（QQ群）
        </p>
        <div class="copy-right">
                Copyright © 1998-2019 Tencent. All Rights Reserved. 腾讯公司 版权所有
        </div>
    </div>

</body>
</html>